<template>
	<view class="SelectOrder">
		<view style="padding-top: 90upx;">
			<view class="head">
				<view class="headL">
					<image src="../../static/mine/search_ico.png" class="searchIcon"></image>
					<input type="text" placeholder="请输入" v-model="keyword" />
					<image src="../../static/mine/delVal.png" class="delVal" v-if="keyword" @click="delVal"></image>
				</view>
				<view class="headR" @click="searchVal">搜索</view>
			</view>
			<view class="SelectOrderBox">
				<view class="OrderList">
					<view class="OrderItem" v-for="(item,index) in groupList" :key="index" :data-index="index" @click="selectGroup">
						<view class="OrderImage" :style="{'background-image':'url('+getImage(item.ShopPackage.title_image)+')'}">
							<!-- <image :src="getImage(item.ShopPackage.title_image)" mode=""></image> -->
						</view>
						<view class="Order_C">
							<view class="OrderName">{{item.ShopPackage.name}}</view>
							<!-- <view class="Ordermake">周一至周日|免预约</view> -->
							<view class="OrderPrice">
								<view class="newPrice">￥{{item.ShopPackage.money}}</view>
								<view class="oldPrice">￥{{item.ShopPackage.oldMoney}}</view>
							</view>
						</view>
						<view class="Order_R">
							<view class="choiceBtn">选择</view>
							<view class="salesNum">售{{item.ShopPackage.sales_volume}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				page:1,
				limit:15,
				keyword:"",
				groupList:[],
				moreFlag:false,
				id:""
			}
		},
		onLoad(options) {
      // #ifdef APP-PLUS
      var args = plus.runtime.arguments;
      if(args){
        app.$vm.setShareDetail(args);
      }
      // #endif
			this.id = options.id;
			this.getList();
		},
		onReachBottom() {
			if(!this.moreFlag){
				return false;
			}
			this.moreFlag = false;
			this.page = this.page + 1;
			this.getList();
		},
		methods: {
			selectGroup(e){
				let index = e.target.dataset.index || e.currentTarget.dataset.index;
				let pages = getCurrentPages();
				pages[pages.length-2].$vm.groupData = this.groupList[index];
				uni.navigateBack({
					delta:1
				})
			},
			getImage(url){
				if(url&&(url.indexOf("http://")!=-1||url.indexOf("https://")!=-1)){
					return url;
				}else{
					return app.$vm.globalData.imgBaseUrl + url;
				}
			},
			searchVal(){
				this.page = 1;
				this.getList();
			},
			delVal(){
				this.keyword = "";
			},
			getList(){
				let obj = {};
				obj.shop_id = this.id;
				if(this.keyword){
					obj.search = this.keyword;
				}
				let newObj = {};
				newObj.page = this.page;
				newObj.limit = this.limit;
				newObj.data = obj;
				this.$u.api.shopPackageRelationList(newObj).then(res=>{
					let groupArr = res.data.list.data.map(cur=>{
						cur.ShopPackage.limit_time = JSON.parse(cur.ShopPackage.limit_time);
						console.log(cur.ShopPackage.package_title)
						if(cur.ShopPackage.package_title){
							let arr = JSON.parse(cur.ShopPackage.package_title);
							let pArr = [];
							for(let i=0;i<arr.length;i++){
								let price = 0;
								if(arr[i].conList){
									for(let j=0;j<arr[i].conList.length;j++){
										price = price + Number(arr[i].conList[j].price);
									}
								}
								pArr.push(price);
							}
							let money = pArr.length>0?pArr[0]:0;
							for(let i=0;i<pArr.length;i++){
								if(money<pArr[i]){
									money = pArr[i];
								}
							}
							cur.ShopPackage.oldMoney = money;
						}else{
							cur.ShopPackage.oldMoney = 0;
						}
						return cur;
					});
					if(this.page == 1){
						this.groupList = groupArr;
					}else{
						this.groupList = this.groupList.concat(groupArr);
					}
					if(this.page<res.data.list.last_page){
						this.moreFlag = true;
					}else{
						this.moreFlag = false;
					}
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.head{
		width: 100%;
		height: 88upx;
		display: flex;
		align-items: center;
		padding: 14upx 24upx;
		box-sizing: border-box;
		justify-content: space-between;
		position: fixed;
		left: 0;
		top: 0;
		background: white;
		z-index: 999;
	}
	.headL{
		width: calc(100% - 88upx);
		height: 60upx;
		border-radius: 30upx;
		background: #F5F5F5;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 0 32upx;
	}
	.searchIcon{
		width: 32upx;
		height: 32upx;
		margin-right: 8upx;
	}
	.delVal{
		width: 24upx;
		height: 24upx;
		margin-left: 8upx;
	}
	.headL>input{
		width: calc(100% - 72upx);
		height: 60upx;
		font-size: 24upx;
		color: #333333;
	}
	.headR{
		font-size: 28upx;
		line-height: 60upx;
		color: #333333;
		font-weight: bold;
	}
	
	
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
.SelectOrder{
	background-color: #F3F3F3;
	min-height: 100vh;
	overflow: auto;
	// padding-top: 88upx;
	.SelectOrderBox{
		padding: 16upx 24upx;
		.OrderList{
			.OrderItem{
				display: flex;
				width: 702upx;
				background: #FFFFFF;
				opacity: 1;
				border-radius: 8upx;
				padding: 24upx 16upx;
				margin-bottom: 16upx;
				.OrderImage{
					width: 112upx;
					height: 112upx;
					border-radius: 8upx;
					// background-color: #F0AD4E;
					margin-right: 16upx;
					background-position: center;
					background-size: cover;
					image{
						width: 100%;
						height: 100%;
						border-radius: 8upx;
					}
				}
				.Order_C{
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					width: calc(100% - 278upx);
					.OrderName{
						font-size: 20upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #333333;
					}
					.Ordermake{
						font-size: 16upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #999999;
					}
					.OrderPrice{
						display: flex;
						align-items: center;
						.newPrice{
							font-size: 20upx;
							font-family: Source Han Sans CN;
							font-weight: bold;
							color: #FFAC3F;
						}
						.oldPrice{
							font-size: 16upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #999999;
							margin-left: 8upx;
							text-decoration: line-through;
						}
					}
				}
				.Order_R{
					display: flex;
					flex-direction: column;
					// justify-content: end;
					align-items: flex-end;
					justify-content: space-between;
					width: 150upx;
					.choiceBtn{
						width: 96upx;
						height: 56upx;
						background: #FFAC3F;
						opacity: 1;
						border-radius: 28upx;
						text-align: center;
						line-height: 56upx;
						font-size: 24upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #FFFFFF;
					}
					.salesNum{
						font-size: 16upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #D0D0D0;
						margin-top: 16upx;
					}
				}
			}
		}
	}
}
</style>
